<template>
  <div class="preview-container">
    <!-- 音频和pdf -->
    <iframe
      class="iframe-box"
      v-if="type === 'pdf'"
      :src="url"
      frameborder="0">
    </iframe>
    <!-- 视频 -->
    <video
      v-if="type === 'video'"
      class="video-box"
      ref="videoPlay"
      controls
      webkit-playsinline="true"
      preload="auto">
      您的浏览器无法播放此视频
    </video>
    <!-- 音频 -->
    <audio
      v-if="type === 'audio'"
      class="video-box"
      controls
      ref="audioPlay"
      preload="auto">
      您的浏览器无法播放此音频
    </audio>
    <!-- word文档 -->
    <div class="docx-box" v-if="type === 'docx'" ref="word"></div>
    <!-- ppt暂无实现方法 -->
    <!-- excel -->
    <div class="excel-box" id="luckysheet" v-if="type === 'xlsx'" ></div>
    <!-- 纯文本 -->
    <iframe
      class="iframe-box"
      v-if="type === 'text'"
      :src="url"
      frameborder="0">
      <head>
          <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
      </head>
    </iframe>
  </div>
</template>

<script>
import { renderAsync } from 'docx-preview'; // word预览插件,不支持.doc
import LuckyExcel from 'luckyexcel'; // excel预览插件, 不支持.xls
import axios from 'axios';
export default {
  name: 'FilePreview',
  props: {
    fileType: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      docxOptions: {
        className: 'kaimo-docx-666', // string：默认和文档样式类的类名/前缀
        inWrapper:  true, // boolean：启用围绕文档内容的包装器渲染
        ignoreWidth: false, // boolean：禁用页面的渲染宽度
        ignoreHeight: false, // boolean：禁止渲染页面高度
        ignoreFonts: false, // boolean：禁用字体渲染
        breakPages: true, // boolean：在分页符上启用分页
        ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页
        experimental: false, // boolean：启用实验功能（制表符停止计算）
        trimXmlDeclaration: true, // boolean：如果为true，解析前会从xml文档中移除xml声明
        useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
        useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
        showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
        debug: false, // boolean：启用额外的日志记录
      },
    };
  },
  mounted() {
    console.log(this.fileType, this.url);
    if (this.fileType === 'mp4') {
      this.$refs.videoPlay.src = this.url;
    } else if (this.fileType === 'mp3') {
      this.$refs.audioPlay.src = this.url;
    } else if (this.fileType === 'docx') {
      this.getDocx();
    } else if (this.fileType === 'xlsx') {
      this.getExcel();
    } else if (this.fileType === 'pptx') {
      this.$notify('暂不支持PPT文件的在线预览');
      this.$router.back();
    }
  },
  methods: {
    getDocx() {//只能读取 .docx 格式数据，无法读取 .doc 格式数据
      axios({
        method: 'get',
        responseType: 'blob',
        url: this.url,
      }).then(({ data }) => {
        renderAsync(data, this.$refs.word);
      });
    },
    getExcel() { //只能读取 .xlsx 格式数据，无法读取 .xls 格式数据
      LuckyExcel.transformExcelToLuckyByUrl(this.url, '', exportJson => {
        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
          this.$toast({ type: 'fail', message: '暂不支持.xls文件类型, 或文件不是excel导致读取失败' });
          return;
        }
        window.luckysheet.destroy(); // 销毁容器
        window.luckysheet.create({ // 创建容器
          container: 'luckysheet',
          showtoolbar: false, // 是否显示工具栏
          showinfobar: false, // 是否显示顶部信息栏
          showstatisticBar: false, // 是否显示底部计数栏
          sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
          allowEdit: false, // 是否允许编辑
          enableAddRow: false, // 是否允许增加行
          enableAddCol: false, // 是否允许增加列
          sheetFormulabar: false, // 是否显示公式栏
          enableAddBackTop: false, // 返回头部按钮
          data: exportJson.sheets, //表格内容
          title: exportJson.info.name // 表格标题
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.preview-container {
  height: 100%;
  .iframe-box {
    width: 100%;
    height: 100%;
  }
  .video-box {
    width: 100%;
    height: 2rem;
  }
  .docx-box {
    width: 100%;
    height: 100vh;
    overflow: scroll;
    :deep .docx-wrapper{
      display: block;
      padding: 0!important;
    }
    :deep .docx{
      width: 100%!important;
      display: table!important;
      padding: 2em 1em 0!important;
    }
  }
  .excel-box {
    width: 100%;
    height: 100%;
    overflow: scroll;
  }
}
</style>
